<div [@routerTransition]>
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title">
                    <span>工具室领用管理</span>
                </h3>
            </div>
            <div class="col text-right mt-3 mt-md-0"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <form class="horizontal-form" autocomplete="off">
                        <div class="m-form m-form--label-align-right">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="row align-items-center">
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_Dept">部门:</label>
                                                <div class="col-8">


                                                    <camc-multiSelect class="float-left" id="userDataPermissions"
                                                        [options]="userDataPermissions" name="table"
                                                        [(ngModel)]="selectedDepts" [style]="{ width: '220px'}"
                                                        styleClass="form-control" defaultLabel="选择部门"
                                                        maxSelectedLabels="5" selectedItemsLabel="已选择 {0} 个部门">
                                                    </camc-multiSelect>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label"
                                                    for="Search_MaterialName">物料编号:</label>
                                                <div class="col-8">
                                                    <input type="text" class="form-control m-input"
                                                        name="Search_MaterialName" id="Search_MaterialName"
                                                        [(ngModel)]="materialCodeFilter" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_Dept">单据编号:</label>
                                                <div class="col-8">
                                                    <input type="text" class="form-control m-input" name="Search_Dept"
                                                        id="Search_Dept" [(ngModel)]="billcode" />
                                                </div>
                                            </div>
                                        </div>


                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label"
                                                    for="Search_MaterialName">单据状态:</label>
                                                <div class="col-8">
                                                    <camc-dropdown-auto [options]="billStatusOptions" name="billstatus"
                                                        [(ngModel)]="billstatus" class="float-left width-percent-100">
                                                    </camc-dropdown-auto>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="f_isCurrentUser">是否本人:</label>
                                                <div class="col-8">
                                                    <camc-dropdown-auto [options]="optionbillBase"
                                                        name="f_isCurrentUser" id="f_isCurrentUser"
                                                        [(ngModel)]="f_isCurrentUser"
                                                        class="float-left width-percent-100">
                                                    </camc-dropdown-auto>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_Dept">计划号:</label>
                                                <div class="col-8">
                                                    <input type="text" class="form-control m-input" name="Search_Dept" id="Search_Dept"
                                                        [(ngModel)]="planNumber" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group row">
                                                <label class="col-4 col-form-label" for="Search_Dept">合同编号:</label>
                                                <div class="col-8">
                                                    <input type="text" class="form-control m-input" name="Search_Dept" id="Search_Dept"
                                                        [(ngModel)]="contractNumber" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-1 m--align-right">
                                    <button (click)="getBills()" class="btn btn-primary m--margin-10" type="submit">
                                        <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>查询
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <hr />

                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="m-subheader__title">领用单信息</h4>
                        </div>
                        <div class="col-md-6 m--align-right">
                            <div class="btn-group m-btn-group" role="group" aria-label="...">
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Create')" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="createOrEditToolReceiveBillModal.show()">
                                    新增
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Delete')"
                                    [disabled]="selectedBill?.f_BillStatus != '新建'" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="deleteBill()">
                                    删除整单
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Submit')"
                                    [disabled]="selectedBill?.f_BillStatus != '新建'||detailPrimengTableHelper.records?.length<1"
                                    type="button" class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="submitBill()">
                                    提交
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Audit')"
                                    [disabled]="!selectedBill||selectedBill?.f_BillStatus == '已审核'" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="auditBill()">
                                    审核
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Post')"
                                    [disabled]="selectedBill?.f_BillStatus != '已审核'" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="postBill()">
                                    过账
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Back')"
                                    [disabled]="selectedBill?.f_BillStatus != '已提交'" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="sendBackBill()">
                                    退回
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.AuditLog')"
                                    [disabled]="!selectedBill" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="auditlog.show(selectedBill.f_ProcessId)">
                                    审核记录
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.PrintBill')" (click)="printBill()"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedBill" type="button">
                                    <i nz-icon type="printer" theme="outline"></i> 单项打印
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.PrintBillList')"
                                    (click)="printBillList()"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedBill" type="button">
                                    <i nz-icon type="printer" theme="outline"></i> 汇总打印
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.PrintAll')" (click)="printAll()"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" type="button">
                                    <i nz-icon type="printer" theme="outline"></i> 打印全部
                                </button>
                            </div>
                        </div>
                        <div class="col-md-12 m--margin-top-20">
                            <p-table #dataTable (onLazyLoad)="getBills($event)" [value]="primengTableHelper.records"
                                [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true"
                                [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns" selectionMode="single"
                                [(selection)]="selectedBill" (onRowSelect)="getBillItems()">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 40px">
                                            序号
                                        </th>
                                        <ng-container *ngFor="let ext of extensions">
                                            <th width="{{ ext.width }}">
                                                {{ ext.title }}
                                            </th>
                                        </ng-container>
                                    </tr>
                                </ng-template>

                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                    <tr [pSelectableRow]="record">
                                        <td style="width: 40px">
                                            {{ i + 1 + paginator.first }}
                                        </td>
                                        <ng-container *ngFor="let ext of extensions">
                                            <ng-container [ngSwitch]="ext.formatType">
                                                <ng-container *ngSwitchCase="1">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="2">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="4">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchDefault>
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] }}
                                                    </td>
                                                </ng-container>
                                            </ng-container>
                                        </ng-container>
                                    </tr>
                                </ng-template>
                            </p-table>

                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                没有数据
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="getBills($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{ 'TotalRecordsCount' | localize: primengTableHelper.totalRecordsCount }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <hr />

                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="m-subheader__title">领用单详细信息</h4>
                        </div>
                        <div class="col-md-6 m--align-right">
                            <div class="btn-group m-btn-group" role="group" aria-label="...">
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Create')"
                                    [disabled]="selectedBill?.f_BillStatus!='新建'" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="createOrEditToolReceiveBillModal.show(selectedBill.id)">
                                    新增
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Create')"
                                    [disabled]="!selectedBillItem||selectedBill?.f_BillStatus!='新建'" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="
                                    createOrEditToolReceiveBillModal.show(selectedBill.id, selectedBillItem)
                                    ">
                                    编辑
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Out.Create')"
                                    [disabled]="!selectedBillItem||selectedBill?.f_BillStatus!='新建'" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="
                                    deleteBillItem()
                                    ">
                                    删除明细
                                </button>

                            </div>
                        </div>

                        <div class="col-md-12 m--margin-top-20">
                            <p-table #detailDataTable (onLazyLoad)="getBillItems($event)"
                                [value]="detailPrimengTableHelper.records"
                                [rows]="detailPrimengTableHelper.defaultRecordsCountPerPage" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="detailPrimengTableHelper.isResponsive"
                                [resizableColumns]="detailPrimengTableHelper.resizableColumns" selectionMode="single"
                                [(selection)]="selectedBillItem">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 40px">
                                            序号
                                        </th>
                                        <ng-container *ngFor="let ext of detialExtensions">
                                            <th width="{{ ext.width }}" *ngIf="ext.key == 'f_MaterialCode'"
                                                pSortableColumn="f_MaterialCode">
                                                {{ ext.title }}
                                                <p-sortIcon field="f_MaterialCode"></p-sortIcon>
                                            </th>
                                            <th width="{{ ext.width }}" *ngIf="ext.key != 'f_MaterialCode'">
                                                {{ ext.title }}
                                            </th>
                                        </ng-container>
                                    </tr>
                                </ng-template>

                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                    <tr [pSelectableRow]="record">
                                        <td style="width: 40px">
                                            {{ i + 1 + detailPaginator.first }}
                                        </td>
                                        <ng-container *ngFor="let ext of detialExtensions">
                                            <ng-container [ngSwitch]="ext.formatType">
                                                <ng-container *ngSwitchCase="1">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="2">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="4">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchDefault>
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] }}
                                                    </td>
                                                </ng-container>
                                            </ng-container>
                                        </ng-container>
                                    </tr>
                                </ng-template>
                            </p-table>

                            <div class="primeng-no-data" *ngIf="detailPrimengTableHelper.totalRecordsCount == 0">
                                没有数据
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="detailPrimengTableHelper.defaultRecordsCountPerPage"
                                    #detailPaginator (onPageChange)="getBillItems($event)"
                                    [totalRecords]="detailPrimengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="detailPrimengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{ 'TotalRecordsCount' | localize: detailPrimengTableHelper.totalRecordsCount }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <createOrEditToolReceiveBillModal #createOrEditToolReceiveBillModal (modalSave)="reloadData($event)"
        (accountShow)="toolAccountBaseInfoModal.show()"></createOrEditToolReceiveBillModal>
    <toolAccountBaseInfoModal #toolAccountBaseInfoModal handletype='领用'
        (modalSave)="createOrEditToolReceiveBillModal.addAccoutInfo($event)"></toolAccountBaseInfoModal>
    <createToolReceiveOpinionModalComponent #createToolReceiveOpinionModalComponent (modalSave)="getOutToolBase()">
    </createToolReceiveOpinionModalComponent>
    <auditlog #auditlog billtype='领用' stocktype='工具'></auditlog>
</div>